<template>
    <el-container style="background-color: black;height: 100vh">
        <el-header style="height: 80px;color: #FFFFFF"><h2>后台管理系统</h2></el-header>
        <!--<div style="height: 50px; background-color: #DCDFE6;">{{this.date}}</div>-->
        <div style="height: 50px; background-color: #DCDFE6;">欢迎你：{{this.nicknme}}</div>
        <el-container style="background-color: black">
            <el-aside>
                <el-row class="tac">
                    <el-col :span="12" style="width: 300px">
                        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                                 @close="handleClose" background-color="black" text-color="#E4E7ED">
                            <el-menu-item index="1">
                                <i class="el-icon-menu"></i>
                                <span slot="title" @click="$router.push({path:'/storefont_main'})">菜单栏目</span>
                            </el-menu-item>
                            <el-submenu index="2">
                                <template slot="title" disabled>
                                    <i class="el-icon-location"></i>
                                    <span @click="$router.push({path:'/unsolve_issue'})">问题商品仓库管理</span>
                                </template>
                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title" disabled>
                                    <i class="el-icon-location"></i>
                                    <span @click="$router.push({path:'/salemanage'})">售后管理</span>
                                </template>
                            </el-submenu>
                            <el-submenu index="4">
                                <template slot="title" disabled>
                                    <i class="el-icon-location"></i>
                                    <span @click="$router.push({path:'/addslideshow'})">轮播图管理</span>
                                </template>
                            </el-submenu>
                            <el-submenu index="5">
                                <template slot="title" disabled>
                                    <i class="el-icon-location"></i>
                                    <span @click="$router.push({path:'/notice'})">公告管理</span>
                                </template>
                            </el-submenu>
                            <el-submenu index="6">
                                <template slot="title" disabled>
                                    <i class="el-icon-location"></i>
                                    <span @click="$router.push({path:'/gathercommodity'})">商品分类管理</span>
                                </template>
                            </el-submenu>
                            <el-submenu index="7">
                                <template slot="title" disabled>
                                    <i class="el-icon-location"></i>
                                    <span @click="$router.push({path:'/par_profit'})">账单信息</span>
                                </template>
                            </el-submenu>
                            <el-submenu index="8">
                                <template slot="title" disabled>
                                    <i class="el-icon-location"></i>
                                    <span @click="$router.push({path:'/manageAdmin'})">权限管理</span>
                                </template>
                            </el-submenu>

                            <el-submenu index="9">
                                <template slot="title" disabled>
                                    <i class="el-icon-location"></i>
                                    <span>商品管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item @click="$router.push({path:'/Product/Selstock'})"
                                                  index="1-1">查看商品
                                    </el-menu-item>
                                    <el-menu-item @click="$router.push({path:'/Product/Selstocked'})"
                                                  index="1-2">查看商品库存
                                    </el-menu-item>
                                    <el-menu-item @click="$router.push({path:'/Product/Joincom'})" index="1-3">
                                        商品入库
                                    </el-menu-item>
                                    <el-menu-item @click="$router.push({path:'/Product/Addcom'})" index="1-4">
                                        添加商品
                                    </el-menu-item>
                                    <el-menu-item @click="$router.push({path:'/Product/Secomdcom'})"
                                                  index="1-5">查看秒杀商品
                                    </el-menu-item>
                                    <el-menu-item @click="$router.push({path:'/Product/Selallcom'})"
                                                  index="1-6">添加秒杀商品
                                    </el-menu-item>
                                    <el-menu-item @click="$router.push({path:'/Product/Addpic'})"
                                                  index="1-7">添加商品图片
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main style="background-color: #FFFFFF;display: flex">
                <transition name="move" mode="out-in">
                    <keep-alive>
                        <router-view>
                        </router-view>
                    </keep-alive>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Login",
        data() {
            //数据变量
            return {
                //姓名
                nicknme: '',
                //当前时间
                date: new Date(),
                //选项卡
                activeName: 'first'
            }
        },
        methods: {
            handleClick(tab, event) {
                window.console.log(tab, event);
            },
        },
        //显示当前时间
        mounted() {
            var _this = this; //声明一个变量指向vue实例this,保证作用域一致
            this.timer = setInterval(function () {
                _this.date = new Date();//修改数据date
            }, 1000);
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer);//在vue实例销毁钱，清除我们的定时器
            }
        },
        //获取Session中的姓名
        created: function () {
            this.axios.post("/Managers/getname").then(response => {
                this.nicknme = response.data.nicknme;
            });
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }
</style>